<template>
	<!-- 20230509 -->
	<view class="mall-pool-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">
			<!-- 顶部条 -->
			<view class="jc-header-title bg-ff">
				<ty-tab-around :list="poolList" :list-key="listKey" :active.sync="index" @click="changeTabs">
				</ty-tab-around>
			</view>

			<!-- 产品列表 -->
			<view class="margin-top-title-header-20">
				<ty-list-list :status="loadStatus">
					<view class="margin-lr-30 margin-tb-20 padding-20 radius-10 bg-ff flex align-center"
						@tap="go('/pages/mall/detail?id='+item.id)" v-for="(item,index) in list" :key="index">
						<!-- 图片 -->
						<image class="jc-image-180 radius-10" :src="item.cover_img" mode="aspectFill"></image>
						
						<view class="margin-left-20 flex-one">
							<!-- 标题 -->
							<view class="line-40 height-80 text-28 text-bold text-33 text-cut-two">{{item.name}}</view>
							<text class="margin-top-25 text-30 text-main">¥{{item.price_min}}</text>
							<view class="margin-top-10 flex align-end justify-between">
								<text class="text-24 text-aa">已售{{item.sales_number}}</text>
								<text class="tyIcon-cart-add text-40 text-main" @click.stop="showSku(index)"></text>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>


			<!-- 底部栏 -->
			<view class="jc-footer-safe bg-ff">
				<view class="line-height-footer padding-lr-30 flex align-center justify-between">
					<view v-if="differMoney != 0">
						<text class="text-28">还差：</text>
						<text class="text-price text-32 text-bold">{{differMoney}}</text>
						<text class="margin-left-20 text-28">免运费</text>
					</view>
					<view v-else>
						<text class="text-28">已免运费</text>
					</view>

					<view class="width-210 line-height-75 bg-main text-center text-30 text-bold text-ff" style="border-radius: 38rpx;"
						@tap="go('/pages/mall/cart',3)">
						返回购物车
					</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 规格弹出框 -->
			<ty-layer-sku :product.sync="detail" :show.sync="isSkuLayerShow" type="1" @confirm="confirm">
			</ty-layer-sku>
		</view>

	</view>
</template>

<script>
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 还差X元免运费
				differMoney: 0,
				// 满X元免运费
				freeFreightLimit: 0,
				// 购物车有效产品
				effectiveProductList: [],
				// 当前选中索引
				index: 0,
				// 显示属性
				listKey: 'name',
				// 凑单价钱区间列表
				poolList: [],
				
				// 加载状态
				loadStatus: '',
				// 展示产品最低价
				priceMin: '',
				// 展示产品最高价
				priceMax: '',
				// 商品列表
				list: [],
			
				// 点击添加购物车的商品详情
				detail: {},
				// SKU浮层是否显示
				isSkuLayerShow: false,
			}
		},

		onReady() {
			// 加载基础设置-免运费金额
			mall.config.getFreeFreight().then(res => {
				if (res.code == 0) {
					this.freeFreightLimit = res.data.free_freight_limit
					// 加载购物车数据
					this.loadCartData() 
				}
			})
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			/**
			 * 加载购物车数据
			 * @date 2023-02-01
			 */
			loadCartData() {
				mall.cart.listCartProduct().then(res => {
					if (res.code == 0) {
						this.effectiveProductList = res.data.effective_product_list

						// 购物车选中商品的价钱
						let cartChooseProductPrice = 0
						this.effectiveProductList.forEach(value => {
							if (value.is_select == 1) {
								cartChooseProductPrice += value.product_price * value.number
							}
						})
						// 差X元免运费，小于0时调整为0
						this.differMoney = parseFloat(this.freeFreightLimit - cartChooseProductPrice).toFixed(2)
						if (this.differMoney < 0) {
							this.differMoney = 0
						}
						
						// 获取凑单价钱区间
						mall.cart.listPool(this.differMoney).then(res => {
							if (res.code == 0) {
								this.poolList = res.data.pool_list
								this.index = res.data.index
								this.priceMin = this.poolList[this.index].price_min
								this.priceMax = this.poolList[this.index].price_max
								
								this.loadList(1)
							}
						})
					}
				})
			},
			
			/**
			 * 切换标签
			 * @param {Object} e
			 * @date 2023-02-01
			 */ 
			changeTabs(e) {
				this.priceMin = this.poolList[e.index].price_min
				this.priceMax = this.poolList[e.index].price_max
				this.loadList(1)
			},
			
			/**
			 * 点击加入购物车
			 * @param {Object} e
			 * @date 2023-02-01
			 */ 
			showSku(index) {
				// 商品详情
				mall.getProduct(this.list[index].id).then(res => {
					this.detail = res.data.detail
					this.isSkuLayerShow = true
				})
			},

			/**
			 * 获取凑单商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', '', this.priceMin, this.priceMax, 3)
			},

			/**
			 * 确认下单
			 * @date 2023-02-01
			 */
			confirm(e) {
				if (this.detail.is_spec_open == 0 && this.detail.stock <= 0) {
					this.cn.toast('库存不足啦!')
					return false
				}

				// 加入或更新购物车
				mall.cart.updateCartProduct(this.detail.id, e.choose_sku, e.buy_number, 1).then(res => {
					if (res.code == 0) {
						this.isSkuLayerShow = false
						this.cn.toast(res.msg)
						// 加载购物车数据
						this.loadCartData() 
					}
				})
			},
		}
	}
</script>

<style scoped>

</style>
